<template>
  <div class="CWA">
    <!--顶部标题-->
    <div class="content-top">
      <span>考勤管理</span>
    </div>
    <!--左边二级侧边栏-->
    <div class="content-left active">
      <div class="menu-item">
        <router-link to="/CWA/CWA">打卡记录</router-link>
      </div>
    </div>
    <!--右边内容-->
    <div class="content-right active">
      <div class="content-head">
        <div class="input-item fl flex flex-y-center">
          <span class="span-title fl">部门：</span>
          <span class="span-input fl">
            <el-cascader
              v-model="tableConfig.paramsTmp.filter"
              :options="allWorker"
              :props="{checkStrictly: true}"
              clearable
            >
            </el-cascader>
          </span>
        </div>
        <div class="input-item fl flex flex-y-center">
          <span class="span-title fl">考勤时间：</span>
          <span class="span-input fl">
            <el-date-picker
              v-model="tableConfig.paramsTmp.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </span>
        </div>
        <div class="input-item fl">
          <span class="span-input fl"
            ><el-button type="primary" @click="FnSearch">查询</el-button></span
          >
        </div>

        <div class="input-item fr">
          <span class="span-input fl"
            ><el-button @click="FnDownTemplate">导入模板下载</el-button></span
          >
        </div>
        <div class="input-item fr">
          <span class="span-input fl">
            <el-button>导入</el-button>
            <input class="file" type="file" @change="FnImport" />
          </span>
        </div>
      </div>
      <div class="content-table">
        <Table
          ref="Table"
          :atone="true"
          :columns="tableConfig.columns"
          :url="tableConfig.url"
          :pparams="tableConfig.pparams"
          @tableBubbling="TableBubbling"
        ></Table>
      </div>
    </div>

    <!--各种弹窗-->
    <Vmask :mask="mask" @FnMask="FnMask" />
  </div>
</template>
<script>
import Vmask from '@/components/vmask.vue'
import Table from '@/components/table.vue'
import mixins from '@/const/mixins.js'
import {} from '@/const/api'

export default {
  name: 'CWA',
  components: {
    Vmask,
    Table,
  },
  mixins: [mixins],
  data() {
    return {
      tableConfig: {
        url: '/class/card',
        columns: [
          {
            dataIndex: 'day',
            title: '日期',
          },
          {
            dataIndex: 'employeeName',
            title: '姓名',
          },
          {
            dataIndex: 'employeeNo',
            title: '工号',
          },
          {
            dataIndex: 'deptName',
            title: '部门',
          },
          {
            dataIndex: 'start',
            title: '打卡开始时间',
          },
          {
            dataIndex: 'end',
            title: '打卡结束时间',
          },
        ],
        pparams: {
          date: '',
          pageNum: 1,
          pageSize: 15,
        },
        paramsTmp: {
          date: [],
          filter: [],
        },
      },
      mask: {
        id: null,
        title: '',
        showMask: false,
        form: [
          {
            title: '班次名称',
            width: '',
            type: 'text',
            name: 'className',
            value: '',
            default: '',
            placeholder: '请填写班次名称',
            disabled: false,
            required: true,
          },
          {
            title: '选择颜色',
            width: '',
            type: 'color',
            name: 'color',
            value: '',
            default: '',
            placeholder: '请填选择颜色',
            disabled: false,
            required: true,
          },
          {
            title: '适用部门',
            width: '',
            type: 'select',
            name: 'deptId',
            value: '',
            default: '',
            placeholder: '请填写适用部门',
            disabled: false,
            required: false,
          },
          {
            title: '开始时间',
            width: '',
            type: 'datetime',
            name: 'a',
            value: '',
            default: '',
            placeholder: '请填写开始时间',
            disabled: false,
            required: false,
          },
          {
            title: '结束时间',
            width: '',
            type: 'datetime',
            name: 'b',
            value: '',
            default: '',
            placeholder: '请填写结束时间',
            disabled: false,
            required: false,
          },
        ],
        width: '28%',
        btnLoading: false,
      },
      total: 0,
      allWorker: [],
      file: '',
    }
  },
  created() {
    window._this = this

    this.getAllWorker() // 获取部门以及以下员工
  },
  methods: {
    async FnSearch() {
      let date = this.tableConfig.paramsTmp.date
      let filter = this.tableConfig.paramsTmp.filter
      let params = this.tableConfig.pparams
      params.startDay = date[0]
        ? this.$utils.parseTime(date[0], '{y}-{m}-{d}')
        : null
      params.endDay = date[1]
        ? this.$utils.parseTime(date[1], '{y}-{m}-{d}')
        : null
      params.pageNum = 1
      delete params.deptId
      delete params.workerNo
      filter[0] && (params.deptId = filter[0])
      filter[1] && (params.workerNo = filter[1])

      setTimeout(() => {
        this.$refs['Table'].fetchList(true)
      }, 100)
    },
    TableBubbling(e) {},
    FnMask() {},
    async FnImport(e) {
      let formData = new FormData()
      let file = e.target.files[0]
      formData.append('file', file, file.name)
      let upLoadRes = await this.$axios.post('/attendance/import', formData, {
        headers: {'Content-Type': 'multipart/form-data'},
      })
      if (upLoadRes.data.state == this.ResCode) {
        this.$Message.success('导入成功')
        setTimeout(() => {
          this.$refs['Table'].fetchList()
        }, 100)
      } else {
        this.$Message.error('导入失败')
      }
      e.target.value = ''
    },
    FnDownTemplate() {
      this.$axios({
        url: '/static/attence.xls',
        method: 'get',
        responseType: 'arraybuffer',
      }).then(res => {
        this.$utils.downBlob(res)
      })
    },
  },
}
</script>

<style lang="less">
.CWA {
  .span-input {
    position: relative;
  }

  .file {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    opacity: 0;
    z-index: 99;
    cursor: pointer;
  }
}
</style>
